<!DOCTYPE html>
<html>
<head>
    <title>Space Shooter</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <link rel="stylesheet"
          href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>window.isPreviewGame = false;</script>
    <script>
        (function () {
            var match,
            pl = /\+/g, // Regex for replacing addition symbol with a space
            search = /([^&=]+)=?([^&]*)/g,
            decode = function (s) {
                return decodeURIComponent(s.replace(pl, " "));
            },
            query = window.location.search.substring(1);

            var urlParams = {};
            while (match = search.exec(query))
                urlParams[decode(match[1])] = decode(match[2]);


            window.turkSubmitTo = urlParams["turkSubmitTo"];
            window.assignmentId = urlParams["assignmentId"];
            window.testGameLength = urlParams["testGameLength"];
            window.gameOrder = urlParams["gameOrder"];
        })();
    </script>
    <script type="text/javascript" src="js/jquery.timer.js"></script>
    <script type="text/javascript" src="js/timer.js"></script>

    <script type="text/javascript" src="js/strategies.js"></script>
    <script type="text/javascript" src="js/scenario.js"></script>
    <script type="text/javascript" src="js/GameEventListener.js"></script>
    <script type="text/javascript" src="js/GameEventListenerList.js"></script>
    <script type="text/javascript" src="js/alertAdvisers.js"></script>
    <script type="text/javascript" src="js/performanceCalculator.js"></script>
    <script type="text/javascript" src="js/trialController.js"></script>
    <script type="text/javascript" src="js/performanceHolder.js"></script>
    <script type="text/javascript" src="js/GameMessageBuffer.js"></script>
    <script type="text/javascript" src="js/controller.js"></script>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type="text/javascript" src="js/feulChart.js"></script>
</head>
<body>
    <div id="game">
        <!-- The canvas for the panning background -->
        <canvas id="background" width="900" height="600">
            Your browser does not support canvas. Please try again with a different browser.
        </canvas>
        <canvas id="flashBackground" width="900" height="600"></canvas>
        <!-- The canvas for all enemy ships and bullets -->
        <canvas id="main" width="900" height="600"></canvas>
        <canvas id="feulstation" width="900" height="600"></canvas>
        <!-- The canvas the ship uses (can only move up
        one forth the screen. -->
        <canvas id="ship" width="900" height="600"></canvas>
        <canvas id="feulship" width="900" height="600"></canvas>
        <canvas id="scoreCan" width="900" height="600"></canvas>
        <canvas id="mechanicalScoreCanvas" width="900" height="600"></canvas>
        <canvas id="alertCan" width="900" height="600"></canvas>

        <div class="mechanicalPanel">
            <div id="mainatenancePanel">
                <canvas id="maintenanceButtonPanelCanvas" width="200" height="200">msgIcon</canvas>
                <button id="buttonMechanicalPanel" onclick="maintenanceActionDone()">
                    <div id="maintenanceTitle">Click or press Enter</div>
                </button>
            </div>
            <div id="repairPanel">
                <canvas id="repairButtonPanelCanvas" width="200" height="200">msgIcon</canvas>
                <button id="buttonRepairMechanicalPanel"
                        onclick="mechanicalActionDone()"></button>
            </div>
        </div>

        <div id="feul">
            <div id="feulChart" style="visibility:hidden"></div>
            <!--	<p style="position:absolute;top:200px;left:80px;font-size:15px"><span id="gaugePre" style="font-size:25px"></span>sec</p> -->
        </div>

        <div class="messagesPanel">
            <canvas id="messagesPanelCanvas" width="660" height="150">msgIcon</canvas>
        </div>

        <div class="score">
            <p>
                YOUR SCORE: <span id="score"></span>
            </p>
            <p>
                TIME LEFT: <span id="time">00:00 m</span>
            </p>
        </div>

        <div id="maintenance">
            <div class="maintenance">
                <button id="maintenanceButton" onclick="maintenanceActionDone()"
                        style="display: inline-block">
                    Maintenance<br /> Cost: <span id="mainCost"></span> points
                </button>
            </div>
        </div>

        <div id="tec">
            <p>MECHANICAL CONDITION</p>
            <canvas id="techStatus" width="190" height="258">[No canvas support]</canvas>
            <p id="mechTitle">all well</p>
            <button id="repairButton" onclick="mechanicalActionDone()">
                Repair<br />Cost: <span id="repCost"></span> points
            </button>
        </div>

        <p id="freezeTitle">
            The space ship is frozen because of <span id="freezeReason"></span> <span id="freezeSec"></span> sec
        </p>

        <div class="game-over" id="game-over">
            GAME OVER <br />
            <span id="game-summery"></span> <br />Your score is:<span id="endScore"></span>
        </div>
        <div class="loading" id="loading">
            LOADING...
            <p>Please wait</p>
        </div>
    </div>

    <script src="js/panelController.js"></script>
    <script src="js/game.js"></script>

    <div class="testPanel">
        <button id="testOnMechanical"
                onclick="panelController.onMaintenanceDone()">
            testOnMechanical
        </button>
        <button id="testOnMaintenanceAlert"
                onclick="panelController.onMaintenanceAlert(2000)">
            Alert
        </button>
        <br />
        <button id="testOnStationRefueling"
                onclick="panelController.onStationRefueling()">
            Refueling
        </button>
        <br />
        <button id="testOnMalfunctionOccur"
                onclick="panelController.onMalfunctionOccurTest()">
            MalfunctionOccur
        </button>
        <br />
        <button id="testOnMalfunctionRepair"
                onclick="panelController.onMalfunctionRepair()">
            Repair
        </button>
        <br />
        <button id="onFreezeDueToSeverMalfunction"
                onclick="panelController.onFreezeDueToSeverMalfunction()">
            Freeze
        </button>
        <br />
        <button id="setFoodInventory" onclick="setFoodInventoryTest()">setFood(5)</button>
        <br />
    </div>

    <div id="dialog-message" title="">
        <div id="diaog-text"></div>
        <div id="chack" style="font-size: 12px; display: none">
            <input type="checkbox" id="showMsg">Please do not show me messages again
        </div>
    </div>


</body>
</html>
